<template>
	<view>
		<view class="content_user">
			<view class="content_user_left">
				<view class="image_t"><up-image width="120rpx" height="120rpx" :src="data.service.icon"
						mode="aspectFill"></up-image></view>
				<view class="txt_t">{{data.service.serviceName}}</view>
			</view>
			<view class="content_user_right">
			</view>
		</view>
<!-- 		<view class="content_user">
			<view class="content_user_left">
				<image src="/static/f/007.gif" mode="widthFix"></image>
				<text>{{dataList.nickName}}</text>
			</view>
			<view class="content_user_right">
				<image src="/static/f/008.gif" mode="widthFix"></image>
				<image src="/static/f/009.gif" mode="widthFix"></image>
			</view>
		</view> -->

		<view class="content">
			<view class="content1">
				<text>实付金额</text>
				<text>{{data.money}}元</text>
			</view>
			<view class="content2">
				<view>
					<text>订单号：</text>
					<text>{{data.orderNo}}</text>
				</view>
				<!-- <view>
					<text>预约时间：</text>
					<text>{{data.yuyueTime}}</text>
				</view> -->
				<view>
					<text>服务类型：</text>
					<text>{{data.title}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{data.createdAt}}</text>
				</view>
				<view>
					<text>支付时间：</text>
					<text>{{data.payAt}}</text>
				</view>
				<view>
					<text>消费时间：</text>
					<text>{{data.yuyueTime}}</text>
				</view>
				<view>
					<text>订单状态：</text>

					<up-text v-if="data.status == 0" text="待付款" plain size="mini" type="error"></up-text>
					<up-text v-if="data.status == 1" text="待服务" plain size="mini" type="error"></up-text>
					<up-text v-if="data.status == 2" text="付款失败" plain size="mini" type="warning"></up-text>
					<up-text v-if="data.status == 3" text="用户取消" plain size="mini" type="info"></up-text>
					<up-text v-if="data.status == 4" text="退款申请中" plain size="mini" type="warning"></up-text>
					<up-text v-if="data.status == 5" text="已退款" plain size="mini" type="info"></up-text>
					<up-text v-if="data.status == 6" text="已关闭" plain size="mini" type="info"></up-text>
					<up-text v-if="data.status == 7" text="服务中" plain size="mini" type="success"></up-text>
					<up-text v-if="data.status == 8" type="info" text="订单完成" plain size="mini"></up-text>
				</view>
			</view>
		</view>
	</view>
	<up-modal :show="show" showCancelButton title="提示" :content='content' @confirm="confirm" @cancel="show=false"
		closeOnClickOverlay ref="uModal" :asyncClose="true"></up-modal>
	<view v-if="data.status == 0" class="footer_btn">
		<view>
			<up-button class="up-button" @click="onStart" type="error" shape="circle" text="开始服务"></up-button>
		</view>
		<view>
			
		</view>
	</view>
</template>

<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		orderStartApi,
		orderDetialApi,
	} from '@/api/order.js'

	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {
		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				type: null,
				orderNo: '',
				content: '',
				show: false,
				data: {},

			})
			onLoad( async (res) => {
				state.orderNo = res.orderNo
			    await getData()
				getQrCode()

			})
			const startOrder = async () => {
				try {
					await orderStartApi({
						orderNo: state.orderNo
					})
					setTimeout(() => {
						uni.$u.toast("服务已开始！");
						state.show = false
						getData()
					}, 1000)

				} catch {
					state.show = false
				}
			}
			const confirm = () => {
				startOrder()
			}
			const onStart = (row) => {
			
				state.show = true
				state.content = "确定要开始进行服务吗？"

			}
			

			const getData = async () => {
				const {
					data
				} = await orderDetialApi(state.orderNo)
				state.data = data
			}
			return {
				...toRefs(state),
				getData,
				getQrCode,
				onStart,
				confirm

			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: relative;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.content_user {
		padding: 20rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		.content_user_left {
			flex: 1;
			display: flex;
			justify-content: flex-start;

			.image_t {
				width: 120rpx;
				margin-right: 20rpx;
			}

			.txt_t {}


		}

		.content_user_right {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 20%;
				height: 100%;
				margin: 0 8% 0 0;
			}
		}
	}

	.content {
		width: 100%;
		margin-top: 5%;

		.content1 {
			width: 100%;
			height: 5vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text:nth-child(1) {
				margin-left: 5%;
			}

			text:nth-child(2) {
				margin-right: 5%;
			}
		}

		.content2 {
			background-color: white;

			view {
				width: 100%;
				height: 3vh;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 5%;
				margin-bottom: 1%;

				text:nth-child(1) {
					color: #B2B2B2;
				}
			}
		}
	}

	.footer_btn {
		background: #fff;
		height: 80rpx;
		width: calc(100% - 40rpx);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 20rpx;
	}
</style>